<template>
	<view>
		<!-- 稳定版瀑布流 -->
		<view class="table_box">
			<view class="table_title">使用文档</view>
			<view class="table_content">
				<text @click="onJumpWebview('http://www.mescroll.com/')">文档地址：https://ext.dcloud.net.cn/plugin?id=805</text>
			</view>
		</view>	
		<waterfall-goods :list="dataList"></waterfall-goods>
	</view>
</template>

<script>
import waterfallGoods from '@/components/zhouWei-waterfall/stable_waterfall_goods';
import allList from './data';
export default {
	components:{
		waterfallGoods
	},
	data() {
		return {
			pageNo: 1,
			dataList: []
		};
	},
	onLoad(e) {
		this.loadData();
	},
	//方法
	methods: {
		loadData() {
			// 此页面是纯净的页面，分页效果不好，可以去看示例
			// 示例地址：https://ext.dcloud.net.cn/plugin?id=2009
			
			// 模拟接口
			let pageSize = 10;
			if(this.pageNo <= Math.ceil(allList.length / pageSize)){
				let dataList = allList.slice((this.pageNo - 1) * pageSize, this.pageNo * pageSize);
				this.mescroll.endByPage(dataList.length, Math.ceil(allList.length / pageSize)); //必传参数(当前页的数据个数, 总页数)
				if (this.pageNo == 1) {
					this.dataList = dataList;
				} else {
					this.dataList = this.dataList.concat(dataList);
				}
				if(dataList.length >= pageSize){
					this.pageNo += 1;
				}
			} else {
				uni.showToast({
					title: "没有更多了",
					icon: "none"
				});
			}
		},
		onJumpWebview(url){
			// #ifdef H5
			window.open(url);
			// #endif
			// #ifndef H5
			this.$store.commit("setWebViewUrl", url);
			uni.navigateTo({
				url: '/pages/template/webView'
			});
			// #endif
		}
	},
	//页面上拉触底
	onReachBottom() {
		this.loadData();
	},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
</style>
